import React,{useState} from 'react';
// Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：
import * as _ from "lodash"
import './App.css';

// 该类学习尝试采取UseState的方式来定义函数组件

// 定义一个类
class SomeChild {
  childId:any = null;
  childName:string = undefined;
  childAge:any = null;
  childSchool:string = undefined;
}

function App() {

  // 定义类的userState下的变量
  const [child,creatChild] = useState(new SomeChild())
  const [childList,setChildList] = useState([])


  return (
    <div className="App">
      <header className="App-header">
      <h1>UseState组件示例</h1>
      <div className="totol-count">孩子总数:{childList.length}胎</div>
      孩子介绍：
      <ul className="Child-List">
        {childList.map((item,index) =>{
          return <div>
            <li key={child.childId}>孩子名字:{item.childName} - 孩子年龄:{item.childAge} - 孩子学校:{item.childSchool}</li>
            <button onClick={()=>{
              // 这里必须把所有属性写全乎了,或者修改部分的话，就用...语法
              creatChild({childName:item.childName,childAge:item.childAge,childSchool:item.childSchool,childId:item.childId})

            }}>不满意-重生</button>

            <button onClick={()=>{
              let tempChildList = childList.filter((p) => p.childId != item.childId)
              console.log("tempChildList",tempChildList)
              setChildList(tempChildList)
            }}>打掉-再来</button>
          </div>           
        })}
      </ul>

      <div>
        名字：<input  key={1} type={"text"} value={child.childName || ""} onChange={(e) =>{
          // js中...语法理解为复制对象，然后进行属性复制
          creatChild({...child, childName:e.target.value})
        }}/>

      </div>
      <div>
        年龄：<input key={2} type={"text"} value={child.childAge || ""} onChange={(e) =>{
          creatChild({...child, childAge:e.target.value})
        }}/>
      </div>
      <div>
        学校：<input key={3} type={"text"} value={child.childSchool || ""} onChange={(e) => {
          creatChild({...child,childSchool:e.target.value})
        }} />
      </div>
      <br></br>  
      <button onClick={() =>{
        if(child.childId) { // 修改重生
         let childIndex = childList.findIndex((p) => p.childId == child.childId)
          childList[childIndex]= _.clone(child)
          setChildList(childList)
        }
        else { // 简单创建
          child.childId = new Date().getTime();
          childList.unshift(_.clone(child))
          setChildList(childList)
        }
        // 这里必须要调用一次 creatChild不然数据不会显示到列表中
        // creatChild(_.clone(child))
        creatChild({childName:null,childAge:null,childId:null,childSchool:null})
        console.log("save-childList",childList)
      }}>
        生一个
      </button>
      
      
        
      </header>
    </div>
  );
}

export default App;
